<template>
  <div>
    <div class="scroll-wrap">
      <p class="field">
        <span class="label">店铺所属地区</span>
        <picker
          mode="region"
          @change="bindRegionChange"
          :value="region"
          class="input"
        >
          <div class="picker">
            <span
              v-if="region.length"
            >{{ region[0] }}，{{ region[1] }}，{{ region[2] }}</span>
            <span class="color" v-else>请选择</span>
          </div>
        </picker>
      </p>
      <p class="field">
        <span class="label">店铺详细地址:</span>
        <input
          v-model="form.shopAddress"
          type="text"
          placeholder="请输入店铺地址信息"
          class="input"
        />
      </p>
      <button class="btn-action-red" @click="next">下一步</button>
    </div>
  </div>
</template>

<script>
import myMixin from '../mixins'
export default {
  mixins: [myMixin],
  data () {
    return {
      showAreaSelect: false,
      form: { province: '', city: '', area: '', shopAddress: '' },
      region: []
    }
  },
  computed: {
    addrText () {
      return ['province', 'city', 'area'].map(_ => this.form[_]).join('')
    }
  },
  onShow () {},
  methods: {
    bindRegionChange (e) {
      this.region = e.target.value
      let obj = {
        province: this.region[0],
        city: this.region[1],
        area: this.region[2]
      }
      Object.assign(this.form, obj)
    },
    verify () {
      let result = true
      let rules = [
        { key: 'province', message: '请选择地区' },
        { key: 'shopAddress', message: '请输入详细地址' }
      ]
      for (const i of rules) {
        if (this.form.hasOwnProperty(i.key) && this.form[i.key]) {
          // do nothing
        } else {
          result = false
          this.$toast(i.message)
          break
        }
      }
      return result
    },
    next () {
      if (this.verify()) {
        this.updateSubmitData(this.form)
        this.$router.push(`/pages/new-open-shop/shop-info/main`)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('../styles/index.css');

.scroll-wrap {
  > .field {
    > .label {
      width: 102px;
    }
    > .input {
      width: calc(100% - 102px);
      .picker {
        font-size: 16px;
        color: #000;
        .color {
          color: #757575;
        }
      }
    }
  }
}
</style>
